<template>
  <div>
    <!-- 查询区域 -->
    <div class="jeecg-basic-table jeecg-basic-table-form-container">
      <a-form @keyup.enter.native="searchQuery">
        <a-row :gutter="8" type="flex">
          <a-col flex="130px">
            <a-form-item label="状态" :label-col="{ style: { width: '50px' } }" >
              <JDictSelectTag placeholder="全部"
                v-model:value="queryParam.promotionStatus"
                dictCode="promotionStatus"
                :dropdownStyle="{ width: '80px', overflow: 'auto' }"
                :dropdownMatchSelectWidth="false"
                :showArrow="false"
                :allowClear="true"
              />
            </a-form-item>
          </a-col>

          <a-col flex="130px">
            <a-form-item label="类型" :label-col="{ style: { width: '50px' } }" >
              <JDictSelectTag placeholder="全部"
                v-model:value="queryParam.getType"
                dictCode="couponType"
                :dropdownStyle="{ width: '80px', overflow: 'auto' }"
                :dropdownMatchSelectWidth="false"
                :showArrow="false"
                :allowClear="true"
              />
            </a-form-item>
          </a-col>

          <a-col flex="200px">
            <a-form-item label="名称" :label-col="{ style: { width: '50px' } }">
              <a-input placeholder="" v-model:value="queryParam.couponName"></a-input>
            </a-form-item>
          </a-col>

          <a-col flex="auto" style="float:right; width:90px; margin-right: 0px;">
          <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
            <a-button type="primary" @click="searchQuery" preIcon="ant-design:search">查询</a-button>
          </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!--引用表格 :rowSelection="rowSelection"-->
    <BasicTable @register="registerTable" :onRowDbClick="handleDblclick" :onRowClick="handleClick" :rowClassName="rowClassName" >  
      <!--插槽:table标题-->
      <template #tableTitle>
        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd"> 添加优惠券 </a-button>
        <!--a-button type="primary" preIcon="ant-design:export-outlined" @click="receivePage()"> 优惠券领取记录 </！a-button-->
      </template>
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>

    <!-- 表单区域 -->
    <CouponModal @register="registerModal" @success="handleSuccess"></CouponModal>

    <!-- 领取记录 -->
    <CouponReceive @register="registerCouponReceiveModal" @success="handleSuccess"></CouponReceive>
  </div>
</template>

<script lang="ts" name="promotion-coupon" setup>
import { ref, computed, unref, reactive, toRaw, watch } from "vue";
import {BasicTable, useTable, TableAction} from '/@/components/Table';
import { useModal } from '/@/components/Modal';
import { useListPage } from '/@/hooks/system/useListPage'
import { columns } from '/@/views/cater/promotions/js/promotion.data';
import { getPlatformCouponList, updatePlatformCouponStatus, deletePlatformCoupon, } from "/@/views/cater/promotions/js/promotion.api";
import { useMessage } from '/@/hooks/web/useMessage';

import CouponModal from './CouponModal.vue'
import CouponReceive from './CouponReceive.vue'
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';

//---------------------列表组件----------------------------------------
const { createMessage, createWarningModal } = useMessage();
//注册table数据
const { prefixCls,tableContext } = useListPage({
  tableProps:{
    rowKey: 'id',
    api: getPlatformCouponList,
    columns: columns,
    canResize:false,
    showTableSetting: false,
    useSearchForm: false,
    showIndexColumn: true,    //行号
    clickToRowSelect: true,   //点击选择
    showActionColumn: true,
    actionColumn: {
      width: 180,
    },
    beforeFetch: (params) => Object.assign(params, unref(queryParam)), 
  },
})
//获取table组件
const [registerTable, {reload, setProps, getRawDataSource, redoHeight},{ rowSelection, selectedRowKeys }] = tableContext
//---------------------列表组件-----------------------------------------

//---------------------查询条件-----------------------------------------
//定义查询表单，查询条件
const queryParam = reactive<any>({

});

function searchQuery() {
  setProps({searchInfo:toRaw(queryParam)});
  reload()
}
//---------------------查询条件------------------------------------------

//---------------------窗口组件------------------------------------------
//注册model
const [registerModal, {openModal}] = useModal();

/**
 * 新增事件
 */
function handleAdd() {
  openModal(true, { isUpdate: false, showFooter: true });
}

/**
 * 编辑事件
 */
function handleEdit(record: Recordable) {
  if (record.promotionStatus === 'CLOSE' || record.promotionStatus === 'NEW') {
    
  }
  openModal(true, {
    record,
    isUpdate: true,
    showFooter: true,
  });
}

//---------------------窗口组件------------------------------------------

//---------------------业务事件------------------------------------------
/**
 * 双击行
 */
function handleDblclick(record) {
  handleEdit(record);
}

/**
 * 单击行
 */
let selectRows = reactive<any>({id: '', username: ''});
function handleClick(record) {
  selectRows.id = record.id
  selectRows.username = record.username
}

function rowClassName(record, index) {
  return record.id === selectRows.id ? 'row-selected' : '';
}

/**
 * 删除事件
 */
async function handleDelete(record) {
  await deleteOne({id: record.id}, reload);
}

/**
 * 批量删除事件
 */
async function batchHandleDelete() {
  await batchDelete({ids: selectedRowKeys.value}, reload);
}

/**
 * 成功回调
 */
function handleSuccess({isUpdate, values}) {
    reload();
}

/**
  * 操作栏
  */
function getTableAction(record){
  return [
    { 
      label: '关闭', 
      color: "success", 
      icon: "ant-design:setting-outlined", 
      ifShow: (record.promotionStatus === 'START' || record.promotionStatus === 'NEW'),
      popConfirm: {
        title: '是否确认关闭',
        confirm: closeOperation.bind(null, record), 
      },
    },
    {
      label: "删除",
      color: "error",
      icon: "ant-design:rest-twotone",
      ifShow: (record.promotionStatus === 'CLOSE' || record.promotionStatus === 'END'),
      popConfirm: {
        title: '是否确认删除',
        confirm: delOperation.bind(null, record),
      },
    },
    { label: "领用记录", color: "warning", icon: "ant-design:copy-outlined", onClick: openCouponReceive.bind(null, record) },
  ]
}

/**
 * 关闭
 */
async function closeOperation(record) {
  let params = {couponIds: record.id, effectiveDays: 0}
  await updatePlatformCouponStatus(params).then((res) => {
    if (res.success) {
      createMessage.success("操作成功！");
      reload();
    } else {
      createMessage.warning(res.message);
    }
  })
}

/**
 * 下架优惠券
 */
async function delOperation(record) {
  await deletePlatformCoupon(record.id).then((res) => {
    if (res.success) {
      createMessage.success("操作成功！");
      reload();
    } else {
      createMessage.warning(res.message);
    }
  })
}
//---------------------业务事件------------------------------------------

//---------------------领取记录------------------------------------------
const [registerCouponReceiveModal, {openModal: openCouponReceive}] = useModal();
function handleCouponReceive() {
  openCouponReceive();
}
//---------------------领取记录------------------------------------------
</script>
<style scoped>

</style>